<template>
  <div class="components-container">
    <div class="logo-wrapper">
      <single-image :avatar-image="entLogoImage" :params="params" @change-image="onChangeImage" />
      <div class="info">
        <div class="name">{{ enterprise.entName }}</div>
        <div>地址：{{ address }}</div>
        <div>详细地址：{{ enterprise.location }}</div>
      </div>
    </div>
    <image-upload
      :images="enterpriseImages"
      :params="params"
      :title="title"
      :span="8"
      @delete-image="deleteImage"
      @upload-image-success="uploadImageSuccess"
    />
  </div>
</template>

<script>
import { getSingleEnterprise, modifiedEnterpriseLogo, addEnetrpriseImage, delEnterpriseImage } from '@/api/enterprise'
import ImageUpload from '@/components/ImageUpload'
import SingleImage from '@/components/SingleImage'
import store from '@/store'

export default {
  name: 'EnterpriseImage',
  components: {
    ImageUpload,
    SingleImage
  },
  data() {
    const IMAGE_FILE_NAME = 'enterpriseImage'
    return {
      entId: '',
      enterprise: {},
      entLogoImage: '',
      enterpriseImages: [],
      entImages: [],
      title: '企业图片',
      imgUrl: process.env.VUE_APP_BASE_IMAGE_API + IMAGE_FILE_NAME,
      params: {
        account: store.getters.token,
        path: IMAGE_FILE_NAME
      }
    }
  },
  computed: {
    address() {
      return `${this.enterprise.province}-${this.enterprise.city}-${this.enterprise.county}`
    }
  },
  created() {
    this.entId = this.$route.query.entId
    this.fetchData()
  },
  methods: {
    fetchData() {
      getSingleEnterprise({ entId: this.entId })
        .then(response => {
          const logo = response.enterprise.image // logo
          const images = response.enterpriseImage // 图片
          this.enterpriseImages = images.map(item => {
            return {
              id: item.id,
              name: item.image,
              url: this.imgUrl + '/' + item.image,
              visible: false
            }
          })
          if (logo === '') {
            this.entLogoImage =
              this.imgUrl + '/defaultLogo.png?' + new Date().getTime()
          } else {
            this.entLogoImage =
              this.imgUrl + '/' + logo + '?' + new Date().getTime()
          }
          this.enterprise = response.enterprise
        })
        .catch(error => {
          console.log(error)
        })
    },
    onChangeImage(imageName) {
      modifiedEnterpriseLogo({
        entId: this.entId,
        image: imageName
      })
        .then(response => {
          this.$notify({
            title: '提示',
            message: '修改成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    deleteImage(id) {
      delEnterpriseImage({ id })
        .then(response => {
          const index = this.enterpriseImages.findIndex(
            v => v.id === id
          )
          this.enterpriseImages.splice(index, 1)
          this.$notify({
            title: '提示',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    },
    uploadImageSuccess(image) {
      addEnetrpriseImage({
        entId: this.entId,
        image
      })
        .then(response => {
          this.enterpriseImages.push({
            name: image,
            url: this.imgUrl + '/' + image,
            visible: false
          })
          this.$notify({
            title: '提示',
            message: '上传成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>

<style scoped>

.logo-wrapper {
  display: flex;
}

.info {
  margin-left: 20px;
  font-size: 18px;
}

.info > div {
  margin-bottom: 15px;
}

.info > .name {
  font-size: 25px;
  font-weight: bolder;
}

.images > .title {
  font-weight: bolder;
  margin: 20px 0;
}

</style>

